import { Meta, Subtitle, Title, Canvas, Controls, Description, Stories } from "@storybook/blocks";
import * as ProgressBarStories from './ProgressBar.stories.ts'

<Meta of={ProgressBarStories} />

<Title />

<Subtitle />
[Component reference on primevue](https://primevue.org/ProgressBar/)

## Import

```ts
import ProgressBar from 'primevue/progressbar';
```

## Playground

<Canvas of={ProgressBarStories.Playground} sourceState="shown" />
<Controls of={ProgressBarStories.Playground} />

## How to use

{/* Add a note here about the relevant props to change appearance of component */}

<Description of={ProgressBarStories} />
<Stories title='' includePrimary={false} />


## Accessibility

### Screen Reader
ProgressBar components uses `progressbar` role along with `aria-valuemin`, `aria-valuemax` and `aria-valuenow` attributes. Value to describe the component can be defined using `aria-labelledby` and `aria-label` props.

### Keyboard Support
Not applicable.